<template>
  <!--      {{props.data}}{{oldFatherId}}-->
  <n-card>
    <n-layout style="height: 450px">
      <n-thing>
        <template
            v-if="avatar"
            #avatar
        >
          <n-avatar
              round
              :src="userStore.avatar"
          />
        </template>
        <template
            v-if="header"
            #header
        >
          <n-space justify="center">
            <n-tag
                type="success"
                v-if="props.data.goalName"
            >
              {{ props.data.goalName }}
            </n-tag>
            <n-tag
                type="success"
                v-if="props.data.fieldName"
            >
              {{ props.data.fieldName }}
            </n-tag>
            <n-tag
                type="success"
                v-if="props.data.stageName"
            >
              {{props.data.stageName }}
            </n-tag>
            <n-tag
                type="success"
                v-if="props.data.taskName"
            >
              {{ props.data.taskName }}
            </n-tag>
          </n-space>
        </template>
        <template
            v-if="description"
            #description
        >
          <n-space>
            <n-gradient-text type="info"> 开始时间： </n-gradient-text>
            <MyTime :time="props.data.startTime"></MyTime>
            <n-gradient-text type="info"> 结束时间： </n-gradient-text>
            <MyTime :time="props.data.endTime"></MyTime>
            <n-gradient-text type="info"> 花费时间： </n-gradient-text>
            <MyTime :time="props.data.endTime-props.data.startTime" type="relative"></MyTime>
            <n-gradient-text type="info"> 地点： </n-gradient-text>
          </n-space>
        </template>
        <n-grid
            :x-gap="12"
            :y-gap="8"
            :cols="1"
        >
          <n-grid-item>
            <n-space>
              <n-gradient-text
                  :size="20"
                  :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
              >
                感想：
              </n-gradient-text>
            </n-space>
            <div style="height: 100px">
              <n-input
                  :value="data.markDownFile"
                  type="textarea"
                  placeholder="暂无内容"
                  readonly
                  show-count
                  style="height: 100px"
              />
            </div>
          </n-grid-item>
          <n-grid-item>
            <n-space>
              <n-gradient-text
                  :size="20"
                  :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
              >
                图片：
              </n-gradient-text>
              <PicShowList v-model="picShowListModel"></PicShowList>
            </n-space>
          </n-grid-item>
          <n-grid-item>
            <n-space>
              <n-gradient-text
                  :size="20"
                  :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
              >
                视频：
              </n-gradient-text>
              <!--            <VedioShowList v-model="vedioShowListModel"></VedioShowList>-->
            </n-space>
          </n-grid-item>
        </n-grid>
      </n-thing>
    </n-layout>
  </n-card>

</template>

<script lang="ts" setup>
import { TaskLogData } from "@/views/model/model";
import { changeTimeUnit, timestampToDateTime } from "@/utils";
import {NButton, useMessage} from "naive-ui";
import { ref, onMounted, inject, watch, reactive } from "vue";
import useUserStore from "@/store/modules/user";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {UseConstsStore} from "@/store/modules/consts";
import PicShowList from "@/views/taskoperation/tasklog/common/PicShowList.vue";
import MyTime from "@/views/task/time/MyTime.vue";

const message = useMessage();
const userStore = useUserStore()
const useSurfaceSetting = UseSurfaceSettingStore()
const useConsts = UseConstsStore()

// 父组件数据
const props = defineProps<{ data: TaskLogData }>();

const picShowListModel = reactive({
  toRemovePicList: new Array<string>(),
  picList: props.data.picList,
  toEdit: false,
});
const vedioShowListModel = reactive({
  toRemovePicList: new Array<string>(),
  picList: props.data.mediaList,
  toEdit: false,
});
// 页面数据
const avatar = ref(true);
const header = ref(true);
const headerExtra = ref(true);
const description = ref(true);

</script>
